<!--  -->
<template>
  <div class="grammar-sentence">
    <div class="chose-course-top">
      <div class="header-left">
        <span class="back-arrow" @click="quitStudy"></span>
      </div>
      <div class="course-title">
        {{ reverseStatus.name }}
      </div>
      <div class="btn-group">
        <a @click="goSkill">考点解读</a>
        <a :disabled="printDisabled" @click="print">打印</a>
        <a class="play-text" @click="goTest">练一练</a>
      </div>
    </div>
    <div style="display: none">
      <div ref="contentToExport" >
        <studyList2 :renderData="learnList.data"></studyList2>
      </div>
    </div>

    <sentenceListItem
      v-if="sentenceList.list.length"
      :renderData="sentenceList.list"
      @goStudy="goStudy"
    ></sentenceListItem>
    <Empty v-else></Empty>
  </div>
</template>

<script>
import studyList2 from "@/views/index/study/grammar-study/studyList2.vue";

let completePng = require("@/assets/reverse/complete-shadow.png");
// import { fetchEndTime, printData, fetchGroupList } from "@/services/reverse";
// import { SUCCESS_CODE } from "@/utils/const";
// import html2canvas from 'html2canvas';
import html2pdf from 'html2pdf.js'
import sentenceListItem from "./sentenceList";
import { mapState, mapMutations } from "vuex";
import Empty from "@/views/components/empty.vue";
export default {
  name: "grammarSentence",
  components: {
    studyList2,
    sentenceListItem,
    Empty,
  },
  data() {
    return {
      printDisabled: false,
      learnList:[],
    };
  },
  computed: {
    ...mapState({
      reverseStatus: (state) => state.reverseStatus,
      sentenceList: (state) => state.sentenceList,
    }),
  },
  watch: {},
  methods: {
    ...mapMutations([
      "setSentenceList",
      "setSentenceCurrent",
    ]),
    goSkill() {
      this.$router.push({
        path: '/reverse/skill',
        query :{
          title:'sentence',
          id:this.reverseStatus.packageId
        }
      })
    },
    print() {
      const element = this.$refs.contentToExport;
      const options = {
        margin:       1,
        filename:     '语句.pdf',
        image:        { type: 'jpeg', quality: 0.98 },
        html2canvas:  { dpi: 192, letterRendering: true },
        jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' }
      };
      html2pdf()
          .from(element)
          .set(options)
          .save();
    },
    printInterval() {
      //倒计时
      let time = 60;
      this.printDisabled = true;
      let timer = setInterval(() => {
        if (time == 0) {
          clearInterval(timer);
          this.printDisabled = false;
        } else {
          this.printDisabled = true;
          time--;
        }
      }, 1000);
    },
    goLastAnswer() {
      this.$router.push({
        path: "/reverse/answer-notes",
      });
    },
    goTest() {
      this.$router.push({
        path: "/reverse/grammar-test",
        query:{
          userId:this.reverseStatus.userId
        }
      });
    },

    goStudy(item) {
      // console.log(item.pass, "----");
      // console.log(item.pass)
      // this.$router.push("/reverse/scene-into");
      // if (+item.pass === 0) {
      //   fetchGroupList({
      //     chapter_id: this.reverseStatus.chapters_id,
      //     curr_id: this.reverseStatus.curr_id,
      //   }).then((res) => {
      //     if (!res.data.length) {
      //       this.setSentenceCurrent({ id: item.id });
      //       this.$router.push("/reverse/scene-into");
      //     } else {
      //       this.$router.push("/reverse/group-test");
      //     }
      //   });
      // } else if (+item.pass === 2) {
        this.setSentenceCurrent({ id: item.id });
        this.$router.push("/reverse/scene-into?userId="+this.reverseStatus.userId);
      // }
    },
    quitStudy() {
      this.$router.push({
        path: '/study/grammar?ref=homepage',
        query: {
          userId:this.reverseStatus.userId,
        },
      })
    }
  },
  created() {
  },
  mounted() {
    this.learnList = {
      "data": [{
        "id": 89791,
        "courseId": 221,
        "packageId": 5,
        "firstLetter": "M",
        "word": "My friend and I play",
        "analysis": null,
        "translation": "我和我的朋友一起玩。",
        "voiceFile": "course_grammar_vocabulary\/voice_file\/89791\/20241121050620_3605.mp3",
        "translationVoiceFile": "",
        "isKeyword": "friend",
        "status": "1",
        "createdAt": "2024-11-21 17:06:12",
        "updatedAt": "2024-11-21 17:06:20"
      },
        {
          "id": 89792,
          "courseId": 221,
          "packageId": 5,
          "firstLetter": "I",
          "word": "I will throw away my trash",
          "analysis": null,
          "translation": "我要把垃圾扔掉。",
          "voiceFile": "course_grammar_vocabulary\/voice_file\/89792\/20241121050621_7051.mp3",
          "translationVoiceFile": "",
          "isKeyword": "trash",
          "status": "1",
          "createdAt": "2024-11-21 17:06:12",
          "updatedAt": "2024-11-21 17:06:21"
        },
        {
          "id": 89793,
          "courseId": 221,
          "packageId": 5,
          "firstLetter": "W",
          "word": "What did you eat for breakfast?",
          "analysis": null,
          "translation": "你早餐吃了什么?",
          "voiceFile": "course_grammar_vocabulary\/voice_file\/89793\/20241121050621_3702.mp3",
          "translationVoiceFile": "",
          "isKeyword": "breakfast",
          "status": "1",
          "createdAt": "2024-11-21 17:06:12",
          "updatedAt": "2024-11-21 17:06:21"
        },
        {
          "id": 89794,
          "courseId": 221,
          "packageId": 5,
          "firstLetter": "T",
          "word": "There are Iwo pens on the desk.",
          "analysis": null,
          "translation": "桌子上有两支钢笔。",
          "voiceFile": "course_grammar_vocabulary\/voice_file\/89794\/20241121050621_1253.mp3",
          "translationVoiceFile": "",
          "isKeyword": "pens",
          "status": "1",
          "createdAt": "2024-11-21 17:06:12",
          "updatedAt": "2024-11-21 17:06:21"
        },
        {
          "id": 89795,
          "courseId": 221,
          "packageId": 5,
          "firstLetter": "I",
          "word": "I wanted to buy it but it cost too much money.",
          "analysis": null,
          "translation": "我想要买，但太贵了。",
          "voiceFile": "course_grammar_vocabulary\/voice_file\/89795\/20241121050622_1922.mp3",
          "translationVoiceFile": "",
          "isKeyword": "buy it",
          "status": "1",
          "createdAt": "2024-11-21 17:06:12",
          "updatedAt": "2024-11-21 17:06:22"
        },
        {
          "id": 89796,
          "courseId": 221,
          "packageId": 5,
          "firstLetter": "H",
          "word": "hello my name is liming",
          "analysis": "",
          "translation": "你们好我的名字叫黎明",
          "voiceFile": "course_grammar_vocabulary\/voice_file\/89796\/20241121051142_7100.mp3",
          "translationVoiceFile": "",
          "isKeyword": "liming",
          "status": "1",
          "createdAt": "2024-11-21 17:11:41",
          "updatedAt": "2024-11-21 17:11:42"
        },
        {
          "id": 89797,
          "courseId": 221,
          "packageId": 5,
          "firstLetter": "H",
          "word": "hello everyone",
          "analysis": "",
          "translation": "你好",
          "voiceFile": "course_grammar_vocabulary\/voice_file\/89797\/20241122045150_5995.mp3",
          "translationVoiceFile": "",
          "isKeyword": "hello",
          "status": "1",
          "createdAt": "2024-11-22 16:51:44",
          "updatedAt": "2024-11-22 16:52:10"
        },
        {
          "id": 89799,
          "courseId": 221,
          "packageId": 5,
          "firstLetter": "I",
          "word": "you wanted to buy it but it cost too much money.",
          "analysis": null,
          "translation": "我想要买，但太贵了。",
          "voiceFile": "course_grammar_vocabulary\/voice_file\/89795\/20241121050622_1922.mp3",
          "translationVoiceFile": "",
          "isKeyword": "buy it,much money",
          "status": "1",
          "createdAt": "2024-11-21 17:06:12",
          "updatedAt": "2024-11-21 17:06:22"
        }
      ],
      "message": "",
      "error": 0
    };
    let { no_next } = this.$route.query;
    if (no_next) {
      this.$yxpConfirm({
        msg: `<img width="223" src="${completePng}" alt=""/>
             <p>已完成本节训练，返回学习列表，节内循环？</p>
            `,
        type: "alert",
        html: true,
        alertBtnText: "返回列表",
      })
        .then(() => {
          this.$router.push("/reverse/grammar-sentence");
        })
        .catch(() => {});
    }
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {
    let audio = document.getElementById("reverse-audio");
    audio.pause();
  },
  destroyed() {},
  activated() {},
};
</script>
<style  scoped>
.grammar-sentence {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  .list-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 30px 40px;
    background: #F0F2F4;
  }

  .chose-course-top {
    display: flex;
    justify-content: space-between;
    position: relative;
    align-items: center;
    height: 80px;
    padding: 0 40px;
    background-color: #fff;
    .anticon {
      font-size: 24px; /* no */
    }

    .header-left {
      flex: 3;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .back-arrow {
        width: 30px;
        height: 27px;
        background-image: url("@/assets/home/btn_back.png");
        background-size: 100%;
        cursor: pointer;
      }
    }

    .course-title {
      width: 100%;
      flex: 1;
      font-weight: 700;
      font-size: 20px;

      .check-title {
        color: #c7c7c7;
        padding: 0 15px;
      }
      .check__active {
        //color: @primary-color;
        color:#019E69;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          width: 23px;
          height: 4px;
          background-color: #019E69;
          bottom: -8px;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
    .btn-group {
      flex: 3;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      & > a {
        color: #27BFA3;
        font-size: 20px;
        display: inline-block;
        margin-left: 50px;
      }
      .play-text {
        font-weight: 700;
      }
    }
  }
}
</style>
